<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>厕所查找详情</title>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			*{padding: 0; margin: 0;}
			ul li{
				list-style: none;
			}
			body{
				background: #fff;
			}
			#app{
				background: #fff;
				position: relative;
			}
			.mui-bar-nav{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background: #fff;
				box-shadow: none;
				padding-top: 10px;
			}
			.mui-icon-left-nav {
				color: #60C68B;
			}
			.search{
				margin-left: 8px;
				margin-right: 13px;
				padding: 8px;
				width:280px;
				height: 36px;
				line-height: 36px;
				box-sizing: border-box;
				background: #EFEFF2;
				border-radius: 10px;
				display: flex;
				justify-content:flex-start;
				align-items: center;
			}
			.search .img_box{
				width:26px;
				height: 26px;
				line-height: 26px;
				vertical-align: middle;
			}
			.search .img_box img{
				display: inline-block;
				width: 70%;
				vertical-align: middle;
			}
			.search input{
				padding: 0;
				margin: 0;
				height: 30px;
				line-height: 30px;
				outline: none;
				border: none;
				color: #000;
				background:#EFEFF2;
				font-size: 12px;
			}
			.search input::-webkit-input-placeholder {
				color: #999;
				font-size: 12px;
			}
			#header span{
				font-size: 16px;
				color: #60C68B;
				white-space: nowrap;
			}
			.search_Result{
				padding: 20px;
				padding-top: 40px;
			
			}
			.search_Result h2{
				padding-top: 17px;
				font-size: 14px;
				color: #666;
			}
			.search_Result ul li{
				font-size: 14px;
				margin: 15px 0;
				color: #999;
			}
			[v-cloak] {
				display: none;
			}

		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<div class="search">
					<div class="img_box">
						<img src="../../images/search.png" alt="搜索">
					</div>
					<input type="text"  class="mui-input-clear" v-model="search_txt" placeholder="输入名称查找" @keyup.enter="Change_search(search_txt)">
				</div>
				<span @click="Change_search(search_txt)">查找</span>
			</header>
			<div class="search_Result">
				<h2>周边卫生间</h2>
				<ul>
					<li v-for="item in search_list" :key="item.toiletName" @click="PassValue(item)">{{item.toiletName}}</li>
				</ul>
				<p v-if="none_data">暂无数据</p>
			</div>
			
		</div>
		
		
		<script src="../../js/vue-resource.js"></script>
		<script src="../../js/base.js"></script>
		<script>
			
			
			mui.plusReady(function() {
				
				var vm =new Vue({
					el:'#app',
					data:{
						search_txt:"",//搜索内容
						list:[],//数据
						search_list:[],//搜索出来的结果
						bflist:[],//备份数据
						status_IF:false,//如果没有结果就不显示!
						none_data:false,//无数据
					},
					methods:{
						rest: function() {
							// var index_map = plus.webview.getWebviewById('html/home.html');
							// mui.fire(index_map, 'clickmapRest');
						},
						GetData: function() {
							var that = this;
							HTTP.post(this, 'toiletInfoController/queryToiletDistribute', function(res) {
								res.data.forEach(function(val) {
									val.locationX = Number(val.locationX);
									val.locationY = Number(val.locationY);
									val.toiletId = val.toiletId;
									val.toiletName = val.toiletName;
								});
								that.list = res.data;
							}, function(res) {
								mui.toast(res.data.mgs);
							})
						},
						Change_search:function(search_txt){//输入框中输入内容
							// console.log(JSON.stringify(search_txt));
							   //搜索厕所
							  if (search_txt == "") {
								//  如果搜索为空，就再次调用一下后台最初传递过来的 表单 方法： this.getdata()
								this.search_list=[];
								mui.toast("搜索内容为空");
								return;
							  } else {
								var newslist = this.list.filter(item => {
								  //搜索厕所名称
								  if (item.toiletName.includes(search_txt)) {
									return item;
								  }
								});
								this.search_list = newslist;
							  }
						},
						PassValue(item){//点击列表传值到地图页面
							// console.log(JSON.stringify(item))
							
							var current_window =  plus.webview.currentWebview(),
								
								home_window = plus.webview.getWebviewById('html/home.html');
								
							//用来执行一个自定义的事件.(让一个页面，执行一个自定义事件。) 补充:在那个页面中去监听这个事件,被运行,
							mui.fire(home_window, 'search_key',{
								data:JSON.stringify(item)
							});
							
							setTimeout(function() {
								plus.webview.close(current_window);
							}, 1000);
							
							
						}
						
						
					},
					created(){
						this.GetData();
						this.bflist=this.list;
					},
				
				})
			});
		</script>
	</body>
</html>
